<template>
  <div class="current-root">
    <template v-for="(item, index) in tabbarData" :key="index">
      <div class="tab-bar-item"
           :class="{active: activeIndex === index}"
           @click="handleItemClick(item,index)"
      >
        <!--   webpack 使用 require 解决     -->
        <img v-if="activeIndex !== index" :src="getAssetUrl(item.image)" :alt="item.title">
        <img v-else :src="getAssetUrl(item.imageActive)" :alt="item.title">
        <span class="text"> {{ item.title }} </span>
      </div>
    </template>
  </div>
</template>

<script setup>
import {tabbarData} from "@/assets/data/tabbar";
import {getAssetUrl} from "@/utils/get_asset_img";
import {ref} from "vue";
import {useRouter} from 'vue-router'

const activeIndex = ref(0)
const router = useRouter();

function handleItemClick(item, index) {
  activeIndex.value = index
  router.push(item.path)
}
</script>

<style lang="less" scoped>
// 当前组件根css类
.current-root {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50px;

  display: flex;
  border: 1px solid #f3f3f3;
  //text-align: center;

  .tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; // 主轴居中
    align-items: center; // 交叉轴居中

    &.active {
      // 这种方式 是 使用css语法定义的变量
      color: var(--primary-color);
    }

    .text {
      font-size: 12px;
      margin-top: 2px;
    }

    img {
      width: 36px;
    }
  }

}
</style>